<template>
<div class="juheh5-idcard">
    <div class="account-header">请按国家规定登记实名信息</div>
    <div class="account-content">
        <div style="text-align: center;">
            <input class="custom-input large" type="text" v-model="name" placeholder="请输入身份证姓名">
            <input class="custom-input large" type="text" v-model="idcard" placeholder="请输入身份证号码">
            <div class="large-btn idcard-margin" @click="handleIdcardAuthenticateClick">立即认证</div>
            <div class="idcard-bottom-tips">根据国家规定，未实名认证不可体验游戏。</div>
        </div>
    </div>
</div>
</template>
<script>
import juheh5Service from '../../../services/juheh5Service';

export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            name: '',
            idcard: '',
        };
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        },
    },
    methods: {
        handleIdcardAuthenticateClick() {
            if (this.name === '') {
                layer.msg('请输入真实姓名', { time: 1000 });
                return false;
            }

            if (this.idcard === '' || !this.validateIdcard(this.idcard)) {
                layer.msg('请输入正确的身份证号码', { time: 1000 });
                return false;
            }

            let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
            if (localAccountInfo.length === 0) {
                layer.msg('无账号信息，请先注册账号', { time: 1000 });
                return false;
            }

            let currentAccount = localAccountInfo[0];
            axios.post('/api/juheh5/account/idcard_auth', {
                name: this.name,
                idcard: this.idcard.toUpperCase(),
                account: currentAccount.account,
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                let info = data.data;
                localAccountInfo.forEach((item, index) => {
                    if (item.account === info.account) {
                        localAccountInfo.splice(index, 1);
                    }
                });
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                layer.msg('实名成功', { time: 1000 });

                juheh5Service.idcardBindCb(info)
                return
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        validateIdcard(idcard) {
            var pattern = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
            return pattern.test(idcard.toUpperCase());
        },
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
    },
};
</script>

<style lang="scss" scoped>
.layui-input-block {
    margin-top: 3px;
    margin-left: 0px !important;
}
</style>
